<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .test{
            list-style: none;
            float: left;
            width: 700px;
            height: 50px;
            background-color: red;
            color: white;
        } */
    </style>
</head>

<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <input type="text" name="username" xxx="123">
    <script>
        /*
        // 获取id名为myul下的li元素
        // var ul=document.getElementById('myul');
        // var lis=ul.getElementsByTagName('li');

        // var lis=document.querySelectorAll('#myul li')
        // console.log(lis);

        //获取id名为myul下的第二个li
        // var li=document.querySelector('#myul li:nth-child(2)')
        // console.log(li);

        //设置#myul下的第三个lihref属性为http：www.cnblog.cn
        var third = document.querySelector('#myul li:nth-child(3)')
        third.setAttribute('href', 'http:www.cnblog.com');
        third.setAttribute('price', '1000');

        var txt = document.querySelector('input');
        console.log(txt.name);
        console.log(txt.getAttribute('xxx'));
        txt.id = 'username';

        //innerHTML和innerText
        var ul = document.querySelector('ul');
        console.log(ul.innerHTML);
        console.log(ul.innerText);
        */


        //设置文本框的背景颜色为红色，（前景颜色）文字为白色
        // var txt=document.querySelector('input');
        // txt.style.backgroundColor='red';
        // txt.style.color='white';

        //li设置样式：1.去掉小圆点  2.设置高度和宽度
        //3.同一行显示    4.背景颜色粉色，前景颜色白色
        // var lis = document.querySelectorAll('#myul li');
        // for (var i = 0; i < lis.length; i++) {
        //     var li = lis[i];

        //     // li.style.liststyle='none';
        //     // li.style.float='left';
        //     // li.style.width='700px';
        //     // li.style.height='50px';
        //     // li.style.backgroundColor='pink';
        //     // li.style.color='white';

        //     // li.className='test';

        //     // li.classList.add('test');
        //     li.classList.add('center');
        //     // li.classList.add('demo');

        //     // li.classList.remove('center');
        // }

        // var ul = document.querySelector('#myul');
        // var parent = ul.parentNode;
        // console.log(parent.nodeName);
        // // var sc=ul.children;
        // var sc = ul.childNodes;
        // for (var i = 0; i < sc.length; i++) {
        //     //过滤文本节点
        //     if (sc[i].nodeType != 3) {
        //         console.log(sc[i].nodeName);
        //     }
        //     // console.log(sc[i].nodeName);
        // }

        // console.log(ul.firstChild.nodeName);
        // console.log(ul.lastChild.nodeName);
        // //去除文本节点，获取子节点
        // // function getFirstNode(node){

        // // }
        // //获取非文本节点的弟节点
        // function getNextSibling(node) {
        //     var result = node;
        //     while (result.nodeType == 3) {
        //         result = result.nextSibling;
        //     }
        //     return result;
        // }
        // var li = document.querySelector('#myul li:nth-child(3)');
        // console.log(getNextSibling(li.nextSibling));
    </script>

</body>

</html>